<template>
  <div class="list px-32 pt-2">
    <div class="title">
      <div class="box">
        <el-divider>
          <span style="font-size: 25px">{{ myText[0]?.[fieldA] }}</span>
        </el-divider>
      </div>
      <span v-html="myText[0]?.[fieldB]" class="my-4"></span>
    </div>
    <div class="load">
      <!-- @click="jump(item.article_id)" -->
      <div
        style="padding: 15px 0"
        class="article"
        v-for="item in newList"
        :key="item"
      >
        <div style="width: 475px; height: 100%">
          <img
            :src="item.article_cover"
            style="width: 100%; height: 100%"
            class="object-cover bg-no-repeat bg-cover"
          />
        </div>
        <div class="py-16 content">
          <div class="tit">{{ item[fieldA] }}</div>
          <div class="text-line-two" v-html="item[fieldB]"></div>
        </div>
      </div>
    </div>
    <div class="flex justify-center items-center my-5">
      <el-pagination
        :page-size="12"
        :pager-count="6"
        :currentPage="page"
        @current-change="handlePage"
        :total="total"
        layout="prev, pager, next"
        :background="true"
      />
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, inject } from "vue";
import news from "@/api/news.js";
const allfield = inject("allfield");
const myText = inject("myText");
const { fieldA, fieldB } = allfield();
const newList = ref([]);
const total = ref(0);
// const pages = ref(0);
const page = ref(1);
// const lock = ref(false);
var router = useRouter();
var route = useRoute();
const znEn = ref({
  nameit: "了解更多",
  ext_field3: "more",
});
const newsPage = async () => {
  const res = await news.newsPage(page.value);
  const { news: n, total: t } = res;
  newList.value = n;
  total.value = t;
};
const handlePage = (pno) => {
  page.value = pno;
  newsPage();
};
onMounted(() => {
  newsPage();
});
const jump = (id) => {
  router.push(`/news/details?aid=${id}`);
};
</script>
<style scoped lang="scss">
.content {
  width: calc(100% - 650px);
}
.list {
  .load {
    // overflow: auto;
    // height: 100vh;
  }
  .load::-webkit-scrollbar {
    width: 0px;
  }
  .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .box {
      width: 350px;
      text-align: center;
      & > span {
        color: #888888;
      }
    }
  }
  .article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 320px;
    // margin-bottom: 15px;
    box-sizing: border-box;
    & > div:last-child {
      padding: 10px 0;
      // flex: 1;
      margin-left: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .tit {
      font-size: 25px;
      margin: 0 0 30px 0;
    }
    .text-line-two {
      font-size: 16px;
      display: -webkit-box;
      word-break: break-all;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 3;
      color: #888888;
    }
    .btm {
      display: flex;
      justify-content: space-between;
      align-items: center;
      & > div:first-child {
        color: #888888;
      }
      & > div:last-child {
        color: #409eff;
      }
    }
  }
}
</style>
